<template>
  <div class="carbon-emissions-calculator-factor-area">

    <!-- 排放因子表格 -->
    <section class="emission-factors-table">
      <h2>排放因子数据表</h2>
      <div class="data-table-container">
        <el-table :data="emissionFactors" style="width: 100%">
          <el-table-column prop="fuelType" label="能源类型" width="300"></el-table-column>
          <el-table-column prop="carbonFactor" label="碳排放因子（g CO2/kWh 或 g CO2/kg）" width="300"></el-table-column>
          <el-table-column prop="unit" label="单位" width="200"></el-table-column>
          <el-table-column prop="source" label="数据来源" width="150"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="editEmissionFactor(scope.$index)" type="text" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </section>

    <!-- 排放因子编辑或新增模态框 -->
    <el-dialog title="编辑/新增排放因子" :visible.sync="factorModalVisible" width="50%">
      <el-form ref="factorForm" :model="currentFactor">
        <el-form-item label="能源类型" prop="fuelType">
          <el-input v-model="currentFactor.fuelType"></el-input>
        </el-form-item>
        <el-form-item label="碳排放因子" prop="carbonFactor">
          <el-input-number v-model="currentFactor.carbonFactor" controls-position="right"></el-input-number>
          <span>{{ currentFactor.factorUnit }}</span>
        </el-form-item>
        <el-form-item label="单位">
          <el-select v-model="currentFactor.factorUnit" placeholder="请选择单位">
            <el-option value="g CO2/kWh">g CO2/kWh</el-option>
            <el-option value="g CO2/kg">g CO2/kg</el-option>
            <!-- 添加其他单位选项... -->
          </el-select>
        </el-form-item>
        <el-form-item label="数据来源">
          <el-input v-model="currentFactor.source" placeholder="请输入数据来源"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFactor">保存</el-button>
          <el-button @click="cancelEdit">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      emissionFactors: [
        // 示例排放因子数据...
        { fuelType: '煤炭', carbonFactor: '...', unit: 'g CO2/kg', source: '...' },
        { fuelType: '石油', carbonFactor: '...', unit: 'g CO2/liter', source: '...' },
        // ...
      ],
      factorModalVisible: false,
      currentFactor: {
        fuelType: '',
        carbonFactor: '',
        factorUnit: '',
        source: '',
      },
    };
  },
  methods: {
    editEmissionFactor(index) {
      this.currentFactor = { ...this.emissionFactors[index] };
      this.factorModalVisible = true;
    },
    submitFactor() {
      // 更新或新增排放因子的逻辑，如向后端API发送请求
      // 请求成功后更新表格数据，并关闭模态框
      // ...
      this.factorModalVisible = false;
    },
    cancelEdit() {
      this.factorModalVisible = false;
      this.$refs.factorForm.resetFields();
    },
  },
};
</script>

<style scoped>
.carbon-emissions-calculator-factor-area {
  /* 页面样式 */
}
.data-table-container {
  margin-bottom: 20px;
}
</style>